<template>
  <div>
    <!-- <div class="info-item">
      <span>姓名</span>
      <span>{{user.name}}</span>
    </div>
    <div class="info-item">
      <span>年龄</span>
      <span>{{user.age}}</span>
    </div>
    <div class="info-item">
      <span>性别</span>
      <span>{{user.sex}}</span>
    </div>
    <div class="info-item">
      <span>手机号</span>
      <span>{{user.phone}}</span>
    </div>
    <div class="info-item">
      <span>家庭住址</span>
      <span>{{user.home}}</span>
    </div> -->
    <div class="info" v-for="[label,value] in infoMap" :key="value">
      <span>{{label}}</span>
      <span>{{value}}</span>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        user:{
          name:'小波',
          age:17,
          sex:'男',
          phone:1919999,
          home: '猪'
        },
        infoMap: new Map()
      }
    },
    mounted() {
      const mapKeys = ['姓名','年龄','性别','电话','家庭地址']
      const result = new Map();
      let i = 0;
      for(const key in this.user) {
        result.set(mapKeys[i],this.user[key]);
        i++
      }
      this.infoMap = result;
    }
  }
</script>